<template>
	<view>
		<mescroll-body ref="mescrollRef" :bottombar="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="position-relative">
				<view style="width: 750rpx; height: 250rpx; background-color: var(--mainColor);" mode=""></view>
				<view class="position-absolute left-0 top-0" style="width: 750rpx; height: 250rpx;">
					<view class="flex align-center u-p-y-20 ">
						<view class="flex-1 flex flex-column align-center border-right">
							<text class="text-white" style="font-size: 70rpx;">{{teamInfo.self_kpi || 0}}</text>
							<text class="u-font-24 text-white">个人业绩（元）</text>
						</view>
						<view class="flex-1 flex flex-column align-center">
							<text class="text-white" style="font-size: 70rpx;">{{teamInfo.team_kpi || 0}}</text>
							<text class="u-font-24 text-white">团队业绩（元）</text>
						</view>
					</view>
				</view>
				<view class="position-relative u-m-x-30 bg-white rounded-20" style="top: -40rpx;">
					<view class="u-p-30">
						<!-- <u-tabs :list="tabs" :is-scroll="false" :current="current" @change="change" :showBar="false"></u-tabs> -->
						<view class="flex align-center justify-between u-p-y-20 u-border-bottom" v-for="(item,index) in list" :key="index">
							<u-avatar :src="item.avatar" mode="circle"></u-avatar>
							<view class="flex-1 flex align-center justify-between u-m-l-20" style="width: 100%;">
								<view class="flex flex-column align-center justify-between">
									<text>{{item.nickname}}</text>
									<text>{{item.mobile}}</text>
								</view>
								<view class="">
									<u-button size="mini" shape="circle" style="color: var(--mainColor);">{{item.level_name}}</u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>	
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { MineCenterApi } from '@/api/serves.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				teamInfo: {},
				current: 0,
				list: []
			};
		},
		computed: {
			tabs() {
				return [{
					name: `一级市场(${this.teamInfo.level_1_num || 0})`
				}, {
					name: `二级市场(${this.teamInfo.level_2_num || 0})`
				}, {
					name: `管理市场(${this.teamInfo.level_3_num || 0})`,
				}]
			}
		},
		methods: {
			// 下拉刷新回掉
			downCallback() {
				this.mescroll.resetUpScroll() 
			},
			// 上拉加载
			upCallback(page) {
				MineCenterApi.my_team({ page: page.num, type: `level_${this.current+1}`}).then(res=> {
					console.log('直推成员', res);
					if(res.code == 1){
						this.teamInfo = res.data
						let result = res.data.child_users
						if(page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(result.data); //追加新数据
						this.mescroll.endByPage(result.data.length, result.total)
					}else {
						this.$Toast(res.msg)
						this.mescroll.endErr()
					}
				})
			},
			change(e) {
				this.current = e
				this.mescroll.resetUpScroll() 
			}
		}
	}
</script>

<style lang="scss" scoped>
.absolute {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>
